<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

		<title>MarketList</title>
		<link href="css/common.css" rel="stylesheet" type="text/css"/>
		<link href="css/custom.css" rel="stylesheet" type="text/css" />
		<link href="css/UI.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="js/jquery1.7.2.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
			$('#header').load('common/header.html','',function(){
				$("#header .menu li a").removeClass("current_page");
          		$("a#ml").addClass("current_page");
			});
			$('#footer').load('common/footer.html');
		});
		</script>
		<style type="text/css">
			.menu ul li .current_page{
				background: #FC9A24;
   				border-color: #FFFFFF;
    			border-top-left-radius: 4px;
    			border-top-right-radius: 4px;
				border-style: solid solid none;
				border-width: 1px 1px medium;
    			position: relative;
    			z-index: 11;
    			top:-2px;
    			box-shadow:0 -3px 2px #666666;
			}
		</style>
		<script type="text/javascript">
		$(document).ready(function(){
			$('.withmore').mouseenter(function(){
				$("<div class='cover'></div>").appendTo(this);
				$(this).children('ul').show();
			});
			$('.withmore').mouseleave(function(){
				$(this).children('ul').hide();
				$(this).children('.cover').remove();
			});
		});
			
		</script>
		 <script src="js/slides.min.jquery.js"></script>
        <script src="js/jquery-ui-1.8.20.custom.min.js"></script>
         <style type="text/css" media="screen">
            .slides_container {
                width:753px;
                height:266px;
            }
            .slides_container div {
                width:100%;
                display:block;
            }
#focus {width:753px; height:266px; overflow:hidden; position:relative; margin-top:5px}
#focus ul {height:266px; position:absolute;}
#focus ul li {float:left; width:753px; height:266px; overflow:hidden; position:relative; background:#000;}
#focus ul li div {position:absolute; overflow:hidden;}
#focus .btnBg {position:absolute; width:753px; height:0px; left:0; bottom:0; background:#000;}
#focus .btn {position:absolute; width:780px; height:10px; padding:5px 10px; right:0; bottom:0; text-align:right;background:#000000; opacity: 0.4;}
#focus .btn span {display:inline-block; _display:inline; _zoom:1; width:25px; height:10px; _font-size:0; margin-left:5px; cursor:pointer; background:#fff;}
#focus .btn span.on {background:#fff;}
#focus .preNext {width:45px; height:100px; position:absolute; top:60px; background:url(img/sprite.png) no-repeat 0 0; cursor:pointer;}
#focus .pre {left:0;}
#focus .next {right:0; background-position:right top;}
        </style>
        <style type="text/css">
			.menu ul li .current_page{
				background: #FC9A24;
   				border-color: #FFFFFF;
    			border-top-left-radius: 4px;
    			border-top-right-radius: 4px;
				border-style: solid solid none;
				border-width: 1px 1px medium;
    			position: relative;
    			z-index: 11;
    			top:-2px;
    			box-shadow:0 -3px 2px #666666;
			}
		</style>
<script type="text/javascript">
$(function(){
	var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积）
	var len = $("#focus ul li").length; //获取焦点图个数
	var index = 0;
	var picTimer;
	
	//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
	var btn = "<div class='btnBg'></div><div class='btn'>";
	for(var i=0; i < len; i++) {
		btn += "<span></span>";
	}
	btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
	$("#focus").append(btn);
	$("#focus .btnBg").css("opacity",0.5);

	//为小按钮添加鼠标滑入事件，以显示相应的内容
	$("#focus .btn span").css("opacity",0.4).mouseenter(function() {
		index = $("#focus .btn span").index(this);
		showPics(index);
	}).eq(0).trigger("mouseenter");

	//上一页、下一页按钮透明度处理
	$("#focus .preNext").css("opacity",0.2).hover(function() {
		$(this).stop(true,false).animate({"opacity":"0.5"},300);
	},function() {
		$(this).stop(true,false).animate({"opacity":"0.2"},300);
	});

	//上一页按钮
	$("#focus .pre").click(function() {
		index -= 1;
		if(index == -1) {index = len - 1;}
		showPics(index);
	});

	//下一页按钮
	$("#focus .next").click(function() {
		index += 1;
		if(index == len) {index = 0;}
		showPics(index);
	});

	//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
	$("#focus ul").css("width",sWidth * (len));
	
	//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
	$("#focus").hover(function() {
		clearInterval(picTimer);
	},function() {
		picTimer = setInterval(function() {
			showPics(index);
			index++;
			if(index == len) {index = 0;}
		},4000); //此4000代表自动播放的间隔，单位：毫秒
	}).trigger("mouseleave");
	
	//显示图片函数，根据接收的index值显示相应的内容
	function showPics(index) { //普通切换
		var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
		$("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
		//$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
		$("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果
	}
});

</script>
	</head>

	<body>
		<div id="header"></div>
			
		<div class="table_list">
			<div class="container">
				<div class="MarketList_light">
					
				<div class="Wish_List">
					<a class="Wish" href="usercenter/uc_fav.html"> Wish List(2)</a>
					<a class="Shop_by_Department" href="#"><span>Shop by</span><br />Department</a>
				</div>
				
				<div class="MarketList_search">
					<p>Search for:</p>
					<div class="MarketList_search_box">
						<span class="search_left">
							<a href="#">ALL</a>
						</span>
						<span class="search_body">
							<input class="MarketList_search_input" />
						</span>
						<a href="" class="search_right">
							Go
						</a>
					</div>
				</div>
				

				<div class="clear_float"></div>
				</div>
			</div>
		</div>
		<div class="wrap">
				<div class="lefts">
						<ul class="menulist index">
							<li>
								<a href="ml_Classification.html">Sublease</a>
							</li>
							<li><a href="#">Used Automobiles </a></li>
							<li class="withmore">
								<a href="#">Alternative Transportation</a>
								<ul>
									<li><a href="">Scooters</a></li>
									<li><a href="">Bicycles</a></li>
									<li><a href="">Long Boards</a></li>
									<li><a href="">Skate Boards</a></li>
								</ul>
							</li>
							<li><a href="#">Used Textbooks</a></li>
							<li><a href="#">Furniture</a></li>
							<li><a href="#">Kitchen Appliances</a></li>
							<li class="withmore"><a href="#" >School Supplies </a>
								<ul>
									<li><a href="">Scooters</a></li>
									<li><a href="">Bicycles</a></li>
									<li><a href="">Long Boards</a></li>
									<li><a href="">Skate Boards</a></li>
								</ul>
							</li>
							<li class="withmore"><a href="#">Electronics</a>
								<ul>
									<li><a href="">Scooters</a></li>
									<li><a href="">Bicycles</a></li>
									<li><a href="">Long Boards</a></li>
									<li><a href="">Skate Boards</a></li>
								</ul>
							</li>
							<li class="withmore"><a href="#">Social Interactions and Peer Networking</a>
								<ul>
									<li><a href="">Scooters</a></li>
									<li><a href="">Bicycles</a></li>
									<li><a href="">Long Boards</a></li>
									<li><a href="">Skate Boards</a></li>
								</ul>
							</li>
							<li class="withmore"><a href="#">Ticket</a>
								<ul>
									<li><a href="">Scooters</a></li>
									<li><a href="">Bicycles</a></li>
									<li><a href="">Long Boards</a></li>
									<li><a href="">Skate Boards</a></li>
								</ul>
							</li>
						</ul>
				</div>
				<div class="rights">
					
					<!--图片轮换-->
					<div class="banner" id="focus">
		<ul>
			<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/MarketList_banner.jpg" width="753" height="266" /></a></li>
			<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/MarketList_banner.jpg" width="753" height="266" /></a></li>
			<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/MarketList_banner.jpg" width="753" height="266" /></a></li>
			<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/MarketList_banner.jpg" width="753" height="266" /></a></li>
			<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/MarketList_banner.jpg" width="753" height="266" /></a></li>
			<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/MarketList_banner.jpg" width="753" height="266" /></a></li>
		</ul>
		</div>
					
					<div class="list">
						<h2>Recent <span>Deals</span></h2>
						<ul>
							<li>
								<a href="ml_Detailed.html"><img src="img/MarketList_SLR.png" /></a>
								<p><a href="ml_Detailed.html">Canon EOS APS-C Sensor DIGIC 4 Image… </a></p>
								<span>12 mins ago</span>
							</li>
							<li>
								<a href="ml_Detailed.html"><img src="img/MarketList_SLR.png" /></a>
								<p><a href="ml_Detailed.html">Canon EOS APS-C Sensor DIGIC 4 Image… </a></p>
								<span>12 mins ago</span>
							</li><li>
								<a href="ml_Detailed.html"><img src="img/MarketList_SLR.png" /></a>
								<p><a href="ml_Detailed.html">Canon EOS APS-C Sensor DIGIC 4 Image… </a></p>
								<span>12 mins ago</span>
							</li><li>
								<a href="ml_Detailed.html"><img src="img/MarketList_SLR.png" /></a>
								<p><a href="ml_Detailed.html">Canon EOS APS-C Sensor DIGIC 4 Image… </a></p>
								<span>12 mins ago</span>
							</li>
						</ul>
					</div>
				</div>
				<div class="clear_float"></div>
		</div>
		<div class="ml_indexList container">
			<div class="mlcontent">
				<h3><img src="" alt="">
						<div></div>
						<div></div>
					</img></h3>
			</div>
			</div>
			
			<!--new marklist style-->

	      <div class="ml_row">
				<div class="leftcontent">
					<div class="wrap">
						<h3 class="title">Sublease</h3>
						<a href="#"><img src="img/Sublease.jpg" alt="" / class="goodsPic"></a>						
						<div class="goods top">
							<a href="#"><img src="img/Sublease_small.jpg" alt="" /></a>
							<h4><a href="">Goods name</a></h4>
							<p>amazon</p>
							<em>$79.00</em>
						</div>
						<div class="goods bottom">
							<a href="#">	<img src="img/Sublease_small.jpg" alt="" /></a>
							<h4><a href="">Goods name</a></h4>
							<p>amazon</p>
							<em>$79.00</em>
						</div>
					</div>
				</div>
					<div class="rightcontent">
					<div class="wrap">
						<h3 class="title">Used Automobiles </h3>
						<a href="#">	<img src="img/UsedAutomobiles.jpg" alt="" / class="goodsPic"></a>		
						<div class="goods top">
							<a href="#"><img src="img/UsedAutomobiles_small.jpg" alt="" /></a>
							<h4><a href="">Goods name</a></h4>
							<p>amazon</p>
							<em>$79.00</em>
						</div>
						<div class="goods bottom">
							<a href="#"><img src="img/UsedAutomobiles_small.jpg" alt="" /></a>
							<h4><a href="">Goods name</a></h4>
							<p>amazon</p>
							<em>$79.00</em>
						</div>
					</div>
				</div>
			</div>
			
			<div class="ml_row even">
				<div class="leftcontent">
					<div class="wrap">
						<h3 class="title">Alternative Transportation</h3>
						<a href="#"><img src="img/AlternativeTransportation.jpg" alt="" / class="goodsPic"></a>						
						<div class="goods top">
							<a href="#"><img src="img/AlternativeTransportation_small.jpg" alt="" /></a>
							<h4><a href="">Goods name</a></h4>
							<p>amazon</p>
							<em>$79.00</em>
						</div>
						<div class="goods bottom">
							<a href="#">	<img src="img/AlternativeTransportation_small.jpg" alt="" /></a>
							<h4><a href="">Goods name</a></h4>
							<p>amazon</p>
							<em>$79.00</em>
						</div>
					</div>
				</div>
					<div class="rightcontent">
					<div class="wrap">
						<h3 class="title">Used Textbooks </h3>
						<a href="#">	<img src="img/Used Textbooks.jpg" alt="" / class="goodsPic"></a>		
						<div class="goods top">
							<a href="#"><img src="img/Used Textbooks_small.jpg" alt="" /></a>
							<h4><a href="">Goods name</a></h4>
							<p>amazon</p>
							<em>$79.00</em>
						</div>
						<div class="goods bottom">
							<a href="#"><img src="img/Used Textbooks_small.jpg" alt="" /></a>
							<h4><a href="">Goods name</a></h4>
							<p>amazon</p>
							<em>$79.00</em>
						</div>
					</div>
				</div>
			</div>
			
			<div class="ml_row">
				<div class="leftcontent">
					<div class="wrap">
						<h3 class="title">Furniture</h3>
						<a href="#"><img src="img/Furniture.jpg" alt="" / class="goodsPic"></a>						
						<div class="goods top">
							<a href="#"><img src="img/Furniture_small.jpg" alt="" /></a>
							<h4><a href="">Goods name</a></h4>
							<p>amazon</p>
							<em>$79.00</em>
						</div>
						<div class="goods bottom">
							<a href="#">	<img src="img/Furniture_small.jpg" alt="" /></a>
							<h4><a href="">Goods name</a></h4>
							<p>amazon</p>
							<em>$79.00</em>
						</div>
					</div>
				</div>
					<div class="rightcontent">
					<div class="wrap">
						<h3 class="title">Kitchen Appliances </h3>
						<a href="#">	<img src="img/KitchenAppliances.jpg" alt="" / class="goodsPic"></a>		
						<div class="goods top">
							<a href="#"><img src="img/KitchenAppliances_small.jpg" alt="" /></a>
							<h4><a href="">Goods name</a></h4>
							<p>amazon</p>
							<em>$79.00</em>
						</div>
						<div class="goods bottom">
							<a href="#"><img src="img/KitchenAppliances_small.jpg" alt="" /></a>
							<h4><a href="">Goods name</a></h4>
							<p>amazon</p>
							<em>$79.00</em>
						</div>
					</div>
				</div>
			</div>
			
			<div class="ml_row even">
				<div class="leftcontent">
					<div class="wrap">
						<h3 class="title">School Supplies </h3>
						<a href="#"><img src="img/SchoolSupplies.jpg" alt="" / class="goodsPic"></a>						
						<div class="goods top">
							<a href="#"><img src="img/Furniture_small.jpg" alt="" /></a>
							<h4><a href="">Goods name</a></h4>
							<p>amazon</p>
							<em>$79.00</em>
						</div>
						<div class="goods bottom">
							<a href="#">	<img src="img/SchoolSupplies_small.jpg" alt="" /></a>
							<h4><a href="">Goods name</a></h4>
							<p>amazon</p>
							<em>$79.00</em>
						</div>
					</div>
				</div>
					<div class="rightcontent">
					<div class="wrap">
						<h3 class="title">Electronics </h3>
						<a href="#">	<img src="img/Electronics.jpg" alt="" / class="goodsPic"></a>		
						<div class="goods top">
							<a href="#"><img src="img/Electronics_small.jpg" alt="" /></a>
							<h4><a href="">Goods name</a></h4>
							<p>amazon</p>
							<em>$79.00</em>
						</div>
						<div class="goods bottom">
							<a href="#"><img src="img/Electronics_small.jpg" alt="" /></a>
							<h4><a href="">Goods name</a></h4>
							<p>amazon</p>
							<em>$79.00</em>
						</div>
					</div>
				</div>
			</div>
			
				<div class="ml_row">
				<div class="leftcontent">
					<div class="wrap">
						<h3 class="title">Social Interactions and Peer Networking</h3>
						<a href="#"><img src="img/Social.jpg" alt="" / class="goodsPic"></a>						
						<div class="goods top">
							<a href="#"><img src="img/Social_small.jpg" alt="" /></a>
							<h4><a href="">Goods name</a></h4>
							<p>amazon</p>
							<em>$79.00</em>
						</div>
						<div class="goods bottom">
							<a href="#">	<img src="img/Social_small.jpg" alt="" /></a>
							<h4><a href="">Goods name</a></h4>
							<p>amazon</p>
							<em>$79.00</em>
						</div>
					</div>
				</div>
					<div class="rightcontent">
					<div class="wrap">
						<h3 class="title">ticket </h3>
						<a href="#">	<img src="img/ticket.jpg" alt="" / class="goodsPic"></a>		
						<div class="goods top">
							<a href="#"><img src="img/tikcet_smaill.jpg" alt="" /></a>
							<h4><a href="">Goods name</a></h4>
							<p>amazon</p>
							<em>$79.00</em>
						</div>
						<div class="goods bottom">
							<a href="#"><img src="img/tikcet_smaill.jpg" alt="" /></a>
							<h4><a href="">Goods name</a></h4>
							<p>amazon</p>
							<em>$79.00</em>
						</div>
					</div>
				</div>
			</div>
		
		
		<div class="pagebar_width clear_float">
			<div class="pagebar ml">
				<span class="current">1
				</span><a href="#">2</a>
				<a href="#">3</a>
				<span>....</span>
				<a href="#">20</a>
				<a href="#">&gt;Next</a>
			</div>
		</div>
		
		<div id="footer">
			
		</div>
		
	</body>
</html>
